<template>
	<view class="admin">
		<view class="uni-padding-wrap uni-common-mt admin-nav">
			<uni-segmented-control :current="current" :values="items" style-type="button" active-color="#007aff"
				@clickItem="onClickItem" />
		</view>
		<view class="list">
			<view v-if="current === 0">
				<uni-collapse accordion v-model="accordionValUser">
					<uni-collapse-item :title="(`${item.name|| '患者'}`)" v-for="(item,index) of userManagement">
						<view class="content">
							<view>姓名：{{item.name|| '--'}}</view>
							<view>年龄：{{item.age|| '--'}}</view>
							<view>性别：{{item.sex == 0 ? '男':'女'}}</view>
							<view>手机号：{{item.mobilePhone|| '--'}}</view>
							<view>身份证：{{item.IDNumber|| '--'}}</view>
							<view>邮箱：{{item.email || '--'}}</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
			<view v-if="current === 1">
				<uni-collapse accordion v-model="accordionValDoctor">
					<uni-collapse-item :title="(`${item.name|| '医生'}`)" v-for="(item,index) of doctorManagement">
						<view class="content">
							<view>姓名：{{item.name || '--'}}</view>
							<view>年龄：{{item.age|| '--'}}</view>
							<view>性别：{{item.sex == 0 ? '男':'女'}}</view>
							<view>手机号：{{item.mobilePhone|| '--'}}</view>
							<view>身份证：{{item.IDNumber|| '--'}}</view>
							<view>邮箱：{{item.email || '--'}}</view>
							<view>擅长：{{item.great|| '--'}}</view>
							<view>简介：{{item.introduction|| '--'}}</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: ['用户', '医生'],
				current: 0,
				accordionValUser: '',
				accordionValDoctor: '',

				userManagement: [],
				doctorManagement: [],
			}
		},

		created() {
			this.userManagement = this.$store.state.userManagement
			this.doctorManagement = this.$store.state.doctorManagement
		},

		methods: {
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
		}
	}
</script>

<style lang="scss">
	.admin {
		width: 100vw;
		opacity: 0.8;
		background: linear-gradient(white, transparent);

		.admin-nav {
			width: 650rpx;
			margin: 0 auto
		}

		.list {
			margin-top: 20rpx;

			.content {
				padding: 0 25rpx;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				view {
					width: 330rpx;
					margin: 10rpx 0 20rpx 20rpx;
				}
			}

			.btn {
				height: 80rpx;
				display: flex;
				justify-content: center;

				view {
					width: 100rpx;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					background-color: red;
					margin-right: 20rpx;
					color: white;
				}

				.edit {
					background-color: skyblue;
				}
			}
		}
	}
</style>
